<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <!-- import CSS -->
  <link rel="stylesheet" href="./asset/index.css" />
  <style>
    .images {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 20px;
    }

    .search {
      margin-bottom: 20px;
      padding: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="search">
      <el-input placeholder="请输入小区名称搜索" v-model="input" clearable @input="inputChanged">
      </el-input>
    </div>
    <div class="images">
      <div v-for="(img, index) in imgNames" :key="img.id">
        <el-image style="width: 200px; height: 200px" :src="img.src" :preview-src-list="srcList">
        </el-image>
        <div>{{img.name}}</div>
      </div>
    </div>

  </div>
</body>
<script src="./asset/vue.min.js"></script>
<script src="./asset/index.js"></script>
<script type="text/javascript">
  if (window.name != "myName") {
    location.reload();
    window.name = "myName";
  }
  else {
    window.name = "";
  }
</script>
<script>
  var imgNames = [
    "上面茵芳小区,下面锦绣苑",
    "丽景苑",
    "中心路小区",
    "松沪苑",
    "启民苑和文浦苑",
    "龙洲苑",
    "奥林匹克花园北区",
    "英郡雷丁",
    "贝尚湾左边",
    "贝尚湾右边",
    "五洲云景苑",
    "桃园苑别墅",
    "复地艺墅",
    "源花城",
    "繁荣苑",
    "奥林匹克花园南区",
    "美丽星城",
    "九亭家园",
    "黎星苑二区",
    "嘉富丽花园",
    "复地爱伦坡总图",
    "摩卡小城",
    "九亭明珠苑",
    "象屿都城",
    "诗林小区",
    "虹桥悦府",
    "英伦风尚",
    "国亭花苑南区",
    "国亭花苑北区",
    "九城湖滨国际公寓小区",
    "宝华花苑",
    "奥林匹克花园北区2",
    "志成花苑小区",
    "天宝恬苑",
    "华亭名苑",
    "颐亭花苑",
    "庄家村",
    "长岛花园",
    "三盛颐景园",
    "叶家中心村",
    "良隆苑",
    "九里亭小区",
    "亭汇花苑",
    "龙珠花苑英国会",
    "富顿街区",
    "花园路别墅",
    "夏州花园",
    "绿庭尚城",
    "象屿名城",
    "金丰蓝庭3期",
    "依云听香园",
    "大和别墅",
    "瀛华苑",
    "九溪十八岛",
    "郎庭上郡",
  ]
  imgNames = imgNames.map((val, index) => {
    return {
      id: val,
      name: val,
      src: `./img/${val}.jpg`
    }
  })
  new Vue({
    el: '#app',
    data: function () {
      return {
        imgNames,
        input: ''
      }
    },
    computed: {
      srcList() {
        return this.imgNames.map((val) => val.src)
      }
    },
    methods: {
      getImg(num) {
        return `./img/${num}.jpg`
      },
      inputChanged(keyword) {
        this.imgNames = imgNames.filter(val => val.name.indexOf(keyword) > -1)
        console.log('处理后:', this.imgNames);
      }
    },
  })
</script>

</html>